section.section-slider {
	padding: 6em 0 3em 6em;
}

.slider {
  width: 100%;
  position: relative;
}

.slider .slider-controls {
  position: absolute;
  right: 0;
  top: -3em;
}

.slider .slider-controls button {
  color: var(--color-petrol);
  margin: 0 2em;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.slider .slider-controls button:hover {
  color: var(--color-green-light);
}

.slider .slider-controls button:disabled {
  color: var(--color-petrol-30);
  cursor: not-allowed;
}

.slider .slider-content {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto; /** limited to 10 items **/
  grid-gap: 0px;
  column-gap: 3em;
  overflow-x: hidden;
  max-width: 100%;
  padding-bottom: 50px;
}

.slider.timeline .slider-content {
	column-gap: 0;
	padding: 0 6em;
}

.slider .slider-content > div {
  /*border: solid 1px var(--color-petrol);*/
  position: relative;
  left: 0;
  transition: all 0.2s ease-in-out;
}

.slider .slider-content > div.left {
  left: 100%;
}

/* timeline specific attributes */
.slider.timeline {
  color: var(--color-petrol);
  font-size: 0.875em;
  background-color: var(--color-white);
}

.slider.timeline .slider-content > div {
  width: 225px;
  padding: 0 250px 0px 0;
  margin-bottom: 60px;
  border-bottom: solid 2px var(--color-petrol-50);

  display: grid;
  grid-template-rows: auto auto 50px;

  box-sizing: content-box;
}

.slider.timeline .slider-content > div p {
  margin: 0;
}

.slider.timeline .slider-content > div::after {
  content: "\e061";
  font-family: "Material Symbols Outlined";
  font-size: 1em;
  position: relative;
  top: 50px;
  left: -3px;
  width: fit-content;
  transition: all 0.2s ease-in-out;
  line-height: 0;
  font-size: 1.5em;
  background-color: var(--color-white);
}
.slider.timeline .slider-content > div:first-child:after {
  content: "\e39e";
  font-size: 3em;
  top: 48px;
}

.slider.timeline .slider-content > div:last-child {
  border: none;
}

.slider.timeline .slider-content > div:last-child:after {
  content: "\e57b";
  font-size: 3em;
  top: 50px;
}

body:lang(ar) .slider.timeline .slider-content > div {
  padding: 0 0 0 250px;
}


@media (max-width: 1000px) {
  section.section-slider {
    padding: 1.5rem;
    position: relative;
  }

  .slider .slider-controls{
    text-align: center;
    bottom: 1.5em;
    top: unset;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
  }
  
}